<template>
    <div>
        <el-table
            v-if="hasPermission('PAGE_ALL_PERMISSION')"
            :data="permissions"
            stripe
            max-height="532"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                sortable
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                sortable
                label="名称"
                width="320">
            </el-table-column>
            <el-table-column
                prop="method"
                label="请求方式"
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="url"
                sortable
                label="URL地址">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.page"
            :page-size="pageInfo.size"
            layout="total, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'permissionManagement',
        data () {
            return {
                permissions: [],
                pageInfo: {
                    page: 1,
                    size: 100,
                    total: 0
                }
            }
        },
        mounted () {
            this.obtainPermissions()
        },
        computed: {
            ...mapGetters({
                hasPermission: 'user/hasPermission'
            })
        },
        methods: {
            ...mapActions('user', {
                pagePermissionAction: 'pagePermission'
            }),
            handleSizeChange (val) {
                this.pageInfo.size = val
                this.obtainPermissions()
            },
            handleCurrentChange (val) {
                this.pageInfo.page = val
                this.obtainPermissions()
            },
            obtainPermissions () {
                this.pagePermissionAction({
                    page: this.pageInfo.page,
                    size: this.pageInfo.size
                }).then(data => {
                    if (data.data) {
                        let permissions = data.data.records
                        permissions.forEach(permission => {
                            switch (permission.method) {
                                case 1:
                                    permission.method = 'GET'
                                    break
                                case 2:
                                    permission.method = 'POST'
                                    break
                                case 3:
                                    permission.method = 'PUT'
                                    break
                                case 4:
                                    permission.method = 'DELETE'
                                    break
                                default:
                                    permission.method = ''
                            }
                        })
                        this.permissions = permissions
                        this.pageInfo.total = data.data.total
                    } else {
                        this.permissions = []
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
